<template>
	<div class="list">
		<md-advanced-table :data="table.rows" v-bind="tableAttrs" :loading="loading" :pager-config="{currentPage: query.page, total: table.count, pageSize: query.size}"
						   @page-change="onPageChange">
			<template #buttons>
				<vxe-form @submit="onSearch">
					<vxe-form-item title="用户名">
						<vxe-input v-model="query.name" placeholder="通过板块名称查询"></vxe-input>
					</vxe-form-item>
					<vxe-form-item>
						<v-btn type="submit" small class="mr-1">搜索</v-btn>
						<v-btn small color="success" @click="$refs.dialog.add()">新增</v-btn>
					</vxe-form-item>
				</vxe-form>
			</template>
			<template #icon="{row}">
				<v-avatar>
					<img :src="row.icon | imageSrc"/>
				</v-avatar>
			</template>
			<template #action="{row}">
				<v-btn small color="primary" class="mr-1" @click="edit(row)">编辑</v-btn>
				<v-btn small color="error" class="mr-1" @click="onDelete(row)">删除</v-btn>
			</template>
			<template #username="{row}">
				<v-btn link small text color="primary">{{ row.username }}</v-btn>
			</template>
			<template #isEnabled="{row}">
				<v-switch v-model="row.isEnabled" @change="onSwitchChange(row)"></v-switch>
			</template>
			<template #isRoleAccess="{row}">
				<v-switch v-model="row.isRoleAccess" @change="onSwitchChange(row)"></v-switch>
			</template>
		</md-advanced-table>
		<category-dialog ref="dialog" @success="getTableData"/>
	</div>
</template>

<script>
import MdTableMixins from '@/common/mixins/MdTableMixins';
import CategoryApi from '@/common/api/CategoryApi';
import MdAdvancedTable from '@/components/widget/MdAdvancedTable';
import CategoryDialog from '@/views/admin/category/modules/CategoryDialog';

export default {
	components: {CategoryDialog, MdAdvancedTable},
	mixins: [MdTableMixins],
	data() {
		return {
			tableAttrs: this.$utils.tableAttrs({
				columnKey: true,
				size: 'medium',
				columns: [
					{field: '#', type: 'seq', width: 40, align: 'center'},
					{field: 'icon', title: '图标', width: 70, align: 'center', slots: {default: 'icon'}},
					{field: 'name', title: '板块名称', align: 'center'},
					{field: 'description', title: '说明', align: 'center'},
					{field: 'username', title: '版主', align: 'center', slots: {default: 'username'}},
					{field: 'isEnabled', title: '是否启用', align: 'center', width: 80, slots: {default: 'isEnabled'}},
					{field: 'isRoleAccess', title: '是否角色控制', align: 'center', width: 110, slots: {default: 'isRoleAccess'}},
					{field: 'rolesNames', title: '可以访问的角色', align: 'center', showOverflow: true},
					{field: 'sortId', title: '排序', align: 'center', width: 80},
					{field: 'action', title: '操作', align: 'center', width: 200, slots: {default: 'action'}}
				],
				toolbarConfig: {
					custom: true,
					zoom: true,
					slots: {
						buttons: 'buttons'
					}
				}
			}),
			loadFunc: () => {
				return CategoryApi.list(this.query)
			}
		}
	},
	computed: {},
	created() {
	},
	methods: {
		dataCallback({rows = [], count}) {

			if (!rows) {
				rows = [];
			}
			this.table.count = count
			this.table.rows = rows.map(item => {
				if (item.rolesIds) item.rolesIds = item.rolesIds.split(',')
				if (item.rolesNames) item.rolesNames = item.rolesNames.split(',')
				return item
			})
		},
		onSwitchChange(row) {
			this.$nextTick(() => {
				this.update(row)
			})
		},
		update(row) {
			this.loading = true;
			CategoryApi.update(row.id, row).then(res => {
				this.$utils.responseHandler(res).catch(() => {
					this.getTableData();
				})
			}).catch(() => {
				this.getTableData();
			}).finally(() => this.loading = false)
		},
		edit(row) {
			this.$refs.dialog.edit(row);
		},
		onDelete(row) {
			this.$utils.onConfirm(`是否删除"${row.name}?`).then(() => {
				CategoryApi.delete(row.id).then(res => {
					this.$utils.responseHandler(res, true, true).then(this.onSearch);
				})
			})
		}
	},
	filters: {},
	watch: {}
}
</script>

<style scoped lang="scss">

</style>